@import url("https://at.alicdn.com/t/font_961097_euw9dmi3bt7.css");
$bkMargin:72px;

.VUE {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:scale(0.5) translate(-50%, -50%);
    transform-origin: 0 0;
    user-select:none;
    /deep/ .P .ERR{
        font-size: 26px;
        padding: 13px 0 13px 88px;
    }
    form{
        margin-top:$bkMargin;
    }
    a,button{
        cursor:pointer;
    }
    .P{
        $labelWidth:50px;
        position:relative;
        input{
            font-size:32px;
            padding:16px 16px 16px 36px+$labelWidth;
            background: transparent;
            width:400px;
            font-weight:200;
            border: 1px solid #666;
            &:focus{
                border-color: $orange;
            }
            &::input-placeholder {
                font-weight:200;
            }
        }
        input:disabled{
            background-color: #f3f3f3;
            border-color: #ccc;
        }
        .I{
            left: 28px;
            width: 39px;
            height: 39px;
            font-size: 36px;
            position: absolute;
            top:19px;
            line-height: 48px;
            color: #333;
        }
        input:focus + .I {
            color:$orange;
        }
        input,button{
            line-height:48px;
        }
    }
    /deep/ p, /deep/ .P{
        margin-top:$bkMargin*.5;
    }
    p{
        button,.button{
            background:transparent;
            width:100%;
            letter-spacing: 2px;
            outline:0;
            border: 1px solid $green;
            color:$green;
            line-height:48px;
            font-size:32px;
            padding:16px;
            box-sizing: border-box;
            text-align: center;
            display:block;
        }
        button.new{
            color:$blue;
            border-color:$blue;
        }
        .button.gray{
            color:#666;
            border-color:#666;
        }
        button:hover,.button:hover{
            color:$orange;
            border-color:$orange;
        }
        .button.disabled,button.disabled{
            color:#999;
            border-color:#999;
            cursor:not-allowed;
        }
    }
    /deep/ .resend{
        .P{
            margin:$bkMargin 0 ;
            text-align:center;
            p{
                font-size:32px;
                margin-top:0;
                a {
                    margin:0 14px;
                }
            }
            .I-loading{
                height:140px;
                transform:translate(-50%,0);
                transform-origin:0;
            }
        }
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type=number]{
            border: 0;
            border-bottom: 2px solid #000;
            font-size: 32px;
            width: 148px;
            padding:0 0 10px 0;
            margin-left: 15px;
            text-align: center;
            background: transparent;
        }
        .button{
            .second{
                span{
                    margin-left:10px;
                }
            }
        }
    }
    .P.TXT{
        font-size:36px;
        text-align:center;
    }
}
